﻿<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>Google Maps</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  href="/mcouponMgr/css/jquery.mobile.structure.css" />
  <link rel="stylesheet" href="/mcouponMgr/css/jquery.mobile.theme.css" />
	<style>
		#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
	</style>
  <script src="/mcouponMgr/js/lib/jquery.js"></script>
<!--<script type="text/javascript" src="/mcouponMgr/maps2.js"></script>-->
  <script src="/mcouponMgr/js/lib/jquery.mobile.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	
		<script type="text/javascript">

		
		
$( "#map-page" ).live( "pageinit", function() {
	var defaultLatLng = new google.maps.LatLng(24.974443, 121.580229);  // Default to Hollywood, CA when no geolocation support
	
	if ( navigator.geolocation ) {
		function success(pos) {
			// Location found, show map with these coordinates
			drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
		}
		
		function fail(error) {
			console.log(error);
			drawMap(defaultLatLng);  // Failed to find location, show default map
		}
		
		// Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
		navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
	} else {
		drawMap(defaultLatLng);  // No geolocation support, show default map	
	}

	function drawMap(latlng) {
		var myOptions = {
			zoom: 15,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
		
		// Add an overlay to the map of current lat/lng
		var marker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: "Greetings!"
		});
	}
	
});

</script>
</head> 
<body> 


<div data-role="page" id="map-page" data-add-back-btn="true" data-back-btn-text="上一頁"
data-back-btn-theme="e" >
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
      <div class="title" id="name"><img src="/mcouponMgr/images/name.png" /></div>
      <img src="/mcouponMgr/images/camera.png" />
    <div data-role="navbar" >
      <ul data-content-theme="e">
        <li><a href="#index"><img id="storeImg" src="/mcouponMgr/images/M_store2.png"/></a></li>
        <li><a href="#index"><img id="bonusImg" src="/mcouponMgr/images/M_bonus2.png"/></a></li>
        <li><a href="#contacts"><img src="/mcouponMgr/images/M_record2.png"/></a></li>
        <li><a href="#events"><img src="/mcouponMgr/images/M_favorite2.png" /></a></li>
      </ul>
      </div>
      <div data-role="navbar">
<ul >  
<li><a class="ui-btn-active ui-state-persist" href="#" data-theme="c"
>
飲食</a>
<li><a href="#" data-theme="c" >用餐</a>

<li><a href="#"data-theme="c" >購物</a>
<li><a href="#" data-theme="c">咖啡</a>
<li><a href="#page4"  data-theme="c" >附近店家</a>
</ul>
  </div>
  </div>
	
	<div data-role="content" id="map-canvas">
		<!-- map loads here... -->
	</div>
    <div data-role="footer" data-position="fixed">
    <div data-role="navbar" data-theme="c">
        <ul>
        <li><a href="store.html" rel="external"><img src="/mcouponMgr/images/list.png"/></a></li>
        <li><a href="showVideo.html"   rel="external"><img src="/mcouponMgr/images/foot_cam.png"/></a></li>
        <li><a href="#contacts"><img src="/mcouponMgr/images/foot_set.png"/></a></li>
      </ul>
      </div>
  </div>
</div>

</body>
</html>

